<style scoped>
  .page {
    text-align: right;margin-top: 10px
  }
  .layout{
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  .demo-spin-col{
    height: 100px;
    position: relative;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .layout-logo{
    width: 110px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 0px;
    left: 0px;
  }
  .layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }
  .layout-footer-center{
    text-align: center;
  }
  .content{
    height: auto;
    background-color:white;
    padding-left: 30px;
    padding-right: 30px;
  }
  .item1{
    height:40px;
    line-height:40px
  }
  .info{
    height: auto;
    background-color:#F8F8FF;
    padding-left: 70px;
    padding-right: 70px;
  }
  .header{
    height: 40px;
    background-color: white;
    line-height: 40px;
    border-bottom: 1px solid orangered;
  }
  .info-middle{
    height: 375px;
    background-color: #F8F8FF;
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 15px;
  }
  .titles{
    height: 35px;
    background-color: black;
    line-height: 35px;
    font-size: 1rem;
    color: white;
    padding-left: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .head_btn {
    height:45px;
    line-height:45px;
    width: 130px;
    float: left;
    margin-right: 20px;
  }
  .subsidy-img {
    height: 140px;
    width: 120px;
    position: absolute;
    right: 8%;
    top: 11%;
  }
  .red_color {
    color: red;
    font-size: 15px;
  }
</style>

<template>
  <div>
    <Tabs value="name1" @on-click="changeTab" v-model="tab_index">
      <TabPane :label="'代理预约('+totalnum+')'" name="0" >
        <span style="margin-left: 20px">代理预约人：</span> <Input v-model="params.agent_name" placeholder="" style="width: 150px" />
        <span style="margin-left: 20px">事项名称：</span><Input v-model="params.item_name" placeholder="" style="width: 150px" />
        <span style="margin-left: 20px">预约时间：</span>  <DatePicker  v-model="timeArr" type="daterange" placement="bottom-end" placeholder="" style="width: 200px" @on-ok="show3()"></DatePicker>
<!--        <span style="margin-left: 20px"></span>  <DatePicker  v-model="searchDate.end_time" type="daterange" placement="bottom-end" placeholder="" style="width: 200px" @on-ok="show3()"></DatePicker>-->
        <Button type="primary" style="margin-left: 20px"  @click="init(params)"><Icon type="ios-search" />搜索</Button>
        <div style="margin-top: 20px">
          <Table border :columns="columns2" :data="datalist1"></Table>
        </div>
        <div  class="page">
          <Page :total="totalnum" :current="currentpageNo" :page-size="currentpageSize" @on-change="change" class="page_style"/>
        </div>
      </TabPane>
      <TabPane :label="'本人预约('+totalnum2+')'" name="1" >
        <span style="margin-left: 20px">预约人：</span> <Input v-model="params1.user_name" placeholder="" style="width: 150px" />
        <span style="margin-left: 20px">事项名称：</span><Input v-model="params1.item_name" placeholder="" style="width: 150px" />
        <span style="margin-left: 20px">预约时间：</span>  <DatePicker type="daterange" v-model="timeArr1" placement="bottom-end" placeholder="" style="width: 200px"></DatePicker>
        <Button type="primary" style="margin-left: 20px" @click="initAgent(params1)"><Icon type="ios-search" />搜索</Button>
        <div style="margin-top: 20px">
          <Table border :columns="columns1" :data="datalist2"></Table>
        </div>
        <div  class="page">
          <Page :total="totalnum2" :current="currentpageNo" :page-size="currentpageSize" @on-change="changeAgent" class="page_style"/>
        </div>
      </TabPane>
    </Tabs>
    <Modal v-model="modal1" title="详情" width="700">
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">预约事项名称:</Col>
        <Col span="12" offset="1">{{paramData.item_name}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">代理人姓名:</Col>
        <Col span="12" offset="1">{{paramData.agent_name}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">代理人手机号:</Col>
        <Col span="12" offset="1">{{paramData.agent_mobile}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">代理人身份证号:</Col>
        <Col span="12" offset="1">{{paramData.agent_cardno}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">预约时间:</Col>
        <Col span="12" offset="1">{{paramData.appoint_time}}</Col>
      </Row>
      <div slot="footer">
        <Button :loading="modal_loading" @click="modal1 = false">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="modal2" title="详情" width="700">
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">预约事项名称:</Col>
        <Col span="12" offset="1">{{paramData.item_name}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">预约人姓名:</Col>
        <Col span="12" offset="1">{{paramData.user_name}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">预约人手机号:</Col>
        <Col span="12" offset="1">{{paramData.user_mobile}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">预约人身份证号:</Col>
        <Col span="12" offset="1">{{paramData.user_cardno}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">预约时间:</Col>
        <Col span="12" offset="1">{{paramData.appoint_time}}</Col>
      </Row>
      <div slot="footer">
        <Button :loading="modal_loading" @click="modal2 = false">关闭</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { getAgentAppointInfo, findAgentAppointList, date2str } from '@/api/eventlist'
export default {
  data () {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        type: 0,
        agent_name: '',
        item_name: '',
        start_time: '',
        end_time: ''
      },
      params1: {
        pageNo: 1,
        pageSize: 10,
        type: 1,
        user_name: '',
        item_name: '',
        start_time: '',
        end_time: ''
      },
      modal1: false,
      modal2: false,
      modal_loading: false,
      searchDate: {
        pageNo: '',
        pageSize: '',
        type: 0
      },
      timeArr: [],
      timeArr1: [],
      currentpageNo: 1,
      currentpageSize: 10,
      totalnum: 0,
      totalnum2: 0,
      tab_index: 0,
      paramData: {},
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'

        },
        {
          title: '预约事项名称',
          key: 'item_name',
          align: 'center',
          width: 300

        },
        {
          title: '预约人姓名',
          key: 'user_name',
          align: 'center',
          width: 120

        },
        {
          title: '预约人手机号',
          key: 'user_mobile',
          align: 'center',
          width: 150
        },
        {
          title: '预约人身份证号',
          key: 'user_cardno',
          align: 'center',
          width: 170
        },

        {
          title: '预约时间',
          key: 'appoint_time',
          align: 'center',
          width: 170
        },
        {
          title: '操作',
          key: 'action',
          width: 182,
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.modal1 = true
                    this.getInfo(params.row.id)
                  }
                }
              }, '查看详情')
            )
            return h('div', temp)
          }
        }
      ],
      data1: [],
      columns2: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'

        },
        {
          title: '预约事项名称',
          key: 'item_name',
          align: 'center',
          width: 300

        },
        {
          title: '代理人姓名',
          key: 'agent_name',
          align: 'center',
          width: 120

        },
        {
          title: '代理人手机号',
          key: 'agent_mobile',
          align: 'center',
          width: 150
        },
        {
          title: '代理人身份证号',
          key: 'agent_cardno',
          align: 'center',
          width: 170
        },

        {
          title: '预约时间',
          key: 'appoint_time',
          align: 'center',
          width: 170
        },
        {
          title: '操作',
          key: 'action',
          width: 182,
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.modal2 = true
                    this.getInfo(params.row.id)
                  }
                }
              }, '查看详情')
            )
            return h('div', temp)
          }
        }
      ],
      data2: [],
      itemData: {},
      personinfo: {},
      datalist1: [],
      datalist2: []
    }
  },
  methods: {
    ok () {
      /* this.$Message.info('Clicked ok') */
    },
    cancel () {
      /* this.$Message.info('Clicked cancel') */
    },
    show3 () {
      console.log(this.value5)
    },
    // 查询预约列表接口
    init (param) {
      console.log(param)
      param.start_time = date2str(this.timeArr[0])
      param.end_time = date2str(this.timeArr[1])
      findAgentAppointList(param).then(res => {
        console.log(res.data.data)
        if (res.data.errcode === 0) {
          this.datalist1 = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    initAgent (param) {
      param.start_time = date2str(this.timeArr1[0])
      param.end_time = date2str(this.timeArr1[1])
      findAgentAppointList(param).then(res => {
        console.log(res.data.data)
        if (res.data.errcode === 0) {
          this.datalist2 = res.data.data.results
          this.totalnum2 = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getInfo (id) {
      getAgentAppointInfo({ id: id }).then(res => {
        console.log(res.data.data)
        if (res.data.errcode === 0) {
          this.paramData = res.data.data
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    change (pageNo) {
      let params = {
        pageNo: pageNo,
        pageSize: this.currentpageSize,
        type: '0'
      }
      this.init(params)
    },
    changeAgent (pageNo) {
      let params = {
        pageNo: pageNo,
        pageSize: this.currentpageSize,
        type: '1'
      }
      this.initAgent(params)
    },
    // 切换tab页
    changeTab (name) {
      this.currentPageNo = 1
      this.currentpageSize = 10
      console.log(this.tab_index, 'tab页')
      var param = {
        pageNo: this.currentPageNo,
        pageSize: this.currentpageSize,
        type: this.tab_index
      }
      if (this.tab_index === 0) {
        this.init(param)
      } else if (this.tab_index === 1) {
        this.initAgent(param)
      }
    }
  },
  mounted () {
    this.init(this.params)
    this.initAgent(this.params1)
  }
}
</script>
